<template>
  <keep-alive>
  <!-- 固定在底部的音乐状态框 -->
  <view class="music-player-bar" v-if="currentSong">
    <!-- 音乐封面 -->
    <image class="music-cover" :src="playList[index].al.picUrl" mode="aspectFill" />
    
    <!-- 歌曲信息 -->
    <view class="music-info">
      <text class="song-name">{{ playList[index].al.name }}</text>
      <text class="artist-name">{{ playList[index].ar[0].name }}</text>
    </view>
    
    <!-- 控制按钮 -->
    <view class="control-buttons">
     <!-- <view class="iconfont icon-prev" @click="playPrev">
		  <uni-icons type="back" size="22" color="#333"></uni-icons>
	  </view> -->
      <view 
        class="iconfont play-btn" @click="togglePlay">
		<img src="/static/images/photo/icon/play.png" alt="" v-if="isPlaying"/>
		<img src="/static/images/photo/icon/pause.png" alt="" v-else="!isPlaying"/>
	  </view>
     <!-- <view class="iconfont icon-next" @click="playNext">
		  <uni-icons type="forward" size="22" color="#333" ></uni-icons>
	  </view> -->
	  <view class="audio">
	  	<audio :action="audioAction" auto ref="audio"
			:src="`https://music.163.com/song/media/outer/url?id=${playList[index].id}.mp3`">
		</audio>
	  </view>
    </view>
  </view>
  </keep-alive>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      currentSong: {
        name: '歌曲名称',
        artist: '歌手名称',
        cover: 'https://s2.music.126.net/style/web2/img/coverall.png?b2d2eeea2dc9fd161536740a0308c4da'
      },
      isPlaying: false,
	  audioAction: {
	    method: 'pause' // 初始状态为暂停
	  }
    }
  },
  computed: {
	  ...mapState('music', ['playList','index'])
  },
  methods: {
    togglePlay() {
      this.isPlaying = !this.isPlaying
      // 这里添加实际的播放/暂停逻辑
	  this.audioAction = {
	    method: this.isPlaying ? 'play' : 'pause'
	  }
    },
	play() {
		this.isPlaying = false
		// setTimeout(function (){
		//    this.audioAction = {
		//      method: 'play'
		//    }
		// }, 3000);
	},
    playPrev() {
      // 播放上一首逻辑
	  
    },
    playNext() {
      // 播放下一首逻辑
    }
  }
}
</script>

<style scoped>
/* 固定在底部的音乐播放条 */
.music-player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-top: 1px solid #f0f0f0;
}

/* 音乐封面 */
.music-cover {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

/* 歌曲信息 */
.music-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.song-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.artist-name {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 控制按钮 */
.control-buttons {
  display: flex;
  align-items: center;
}

.control-buttons .iconfont {
  font-size: 20px;
  color: #333;
  margin-left: 20px;
}

.control-buttons .play-btn {
  font-size: 24px;
  color: #ff4e4e;
}

.play-btn>img {
	width: 30px;
	height: 30px;
}

.audio {
	width: 0;
	height: 0;
	overflow: hidden;
}
</style>